import React from 'react'
import { Row, Col, Typography, Button, Switch, Input } from 'antd'
import { Dropdown, Space, Divider, Select } from 'antd';
import { DownOutlined } from '@ant-design/icons';
const { Title } = Typography;
const Setting = (props) => {
    const { data = {}, list, onChange, selectIndex, } = props
    const items = [
        {
            label: (
                <Button onClick={() => {
                    onChange({
                        changeType: 'all',
                        list: list.map(item => {
                            return {
                                ...item,
                                require: true
                            }
                        })
                    })
                }} type='link'>全部题目设为必填</Button>
            ),
            key: '0',
        },
        {
            label: (
                <Button onClick={() => {
                    onChange({
                        changeType: 'all',
                        list: list.map(item => {
                            return {
                                ...item,
                                require: false
                            }
                        })
                    })
                }} type='link'>全部题目设为非必填</Button>
            ),
            key: '1',
        },
    ];
    const { require, rule ,font_rule, font_length ,onlyRead = false} = data
    return <Row gutter={[24, 24]}>
        <Col span={24}>
            <Title level={4}>全局设置</Title>
        </Col>
        <Col span={24}>
            <Dropdown
                menu={{
                    items,
                }}
            >
                <Button type='link' onClick={(e) => e.preventDefault()}>
                    <Space>
                        全部题目必填设置
                        <DownOutlined />
                    </Space>
                </Button>
            </Dropdown>
        </Col>
        <Col span={24}>
            <Divider></Divider>
        </Col>
        <Col span={24}>
            <Title level={4}>基础设置</Title>
        </Col>
        <Col span={24}>
            此题必填   <Switch onChange={(e) => {
                onChange({
                    data: { require: e },
                    changeType: 'update',
                    index: selectIndex
                })
            }} checked={require}></Switch>
        </Col>
        <Col span={24}>
            <Divider></Divider>
        </Col>
        <Col span={24}>
            <Title level={4}>填空设置</Title>
        </Col>
        <Col span={24}>
            格式限制
        </Col>
        <Col span={24}>
            <Select disabled={onlyRead} onChange={(e) => {
                onChange({
                    data: { rule: e },
                    changeType: 'update',
                    index: selectIndex
                })
            }} value={rule} style={{ width: '90%' }} options={[
                { label: '不限制', value: '' },
                { label: '数字', value: 'number' },
                { label: '手机号', value: 'mobile' },
                { label: '身份证号', value: 'idCard' },
                { label: '银行卡号', value: 'bankCard' },
                { label: '邮箱', value: 'email' },
            ]}></Select>
        </Col>
       {!onlyRead &&<>
        <Col span={24}>
            字数限制
        </Col>
        <Col span={24}>
            <Space >
                <Select onChange={(e) => {
                    onChange({
                        data: {
                            font_rule: e,
                            font_length: 0
                        },
                        changeType: 'update',
                        index: selectIndex
                    })
                }} value={font_rule} style={{ width: 180 }} options={[
                    { label: '不限制', value: '' },
                    { label: '不超过', value: 'more' },
                    { label: '不少于', value: 'under' },
                ]}></Select>
                <Input onChange={(e) => {
                    onChange({
                        data: { font_length: e.target.value },
                        changeType: 'update',
                        index: selectIndex
                    })
                }} value={font_length}></Input>字
            </Space>
        </Col>
       </>} 
    </Row>
}
export default Setting